<template>
	<view>
		<view class="question-header">
			<view class="layout">				
				<view class="question-header-icon" @click="handleBackedButton()">
					<image src="/static/icon/icon-back.png"></image>
				</view>
				<view class="question-header-tooltip">第一章 第一节 会计基本理论</view>
			</view>
		</view>
		<view class="question-clock">
			<view class="layout">
				<view class="question-clock-timer">
					<view class="layout">						
						<view class="question-clock-timer-icon">
							<image src="/static/icon/icon-timer.png"></image>
						</view>
						<view class="question-clock-timer-text">{{clockTimer.timerHour}}:{{clockTimer.timerMinute}}:{{clockTimer.timerSecond}}</view>
					</view>
				</view>
				<view class="question-clock-tool">
					<view class="layout">
						<view class="question-clock-tool-item">
							<image src="/static/icon/ion-calc.png"></image>
						</view>
						<view class="question-clock-tool-item">
							<image src="/static/icon/icon-help.png"></image>
						</view>
						<view class="question-clock-tool-item">
							<image src="/static/icon/icon-moer.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="question-clock-menu" v-if="1 > 2">
			<view class="question-clock-menu-item">
				<view class="layout">	
					<view class="question-clock-menu-tooltip">字体大小</view>
					<view class="question-clock-menu-volume">
						<view class="layout">	
							<view class="question-clock-menu-volume-item">小</view>
							<view class="question-clock-menu-volume-item">中</view>
							<view class="question-clock-menu-volume-item">大</view>
							<view class="question-clock-menu-volume-item">超大</view>
						</view>
					</view>
				</view>
			</view>
			<view class="question-clock-menu-item">
				<view class="layout">					
					<view class="question-clock-menu-tooltip">背题模式</view>
					<view class="question-clock-menu-volume">
						<switch checked />
					</view>
				</view>
			</view>
			<view class="question-clock-menu-item">
				<view class="layout">					
					<view class="question-clock-menu-tooltip">做对自动跳转下一题</view>
					<view class="question-clock-menu-volume">
						<switch checked />
					</view>
				</view>
			</view>
		</view>
		<view @touchstart="handleMoveBegin" @touchmove="handleMove" @touchend="handleEnd">			
			<view class="question-basic">
				<view class="question-basic-type">单选题</view>
				<view class="question-basic-tooltip">{{questionData.questionName}}</view>
			</view>
			<view class="question-list">
				<view class="question-list-block" v-for="(question,index) in questionList" :key="index" :class="question.checked == true && question.allowedRight == 2?'question-list-waring':''">
					<view class="question-list-block-box" @click="handleQuestionButton(question,index)" >
						<view>{{question.volume}}.</view>
						<view>{{question.title}}</view>					
					</view>
				</view>
				<view class="question-list-button">
					<view class="layout">
						<view class="question-list-button-icon">
							<image src="/static/icon/icon-help.png"></image>
						</view>
						<view>重做</view>
					</view>
				</view>
			</view>
		</view>
		<view class="question-analysis">
			<view class="question-analysis-result">
				<view class="layout">					
					<view class="question-analysis-result-tooltip">正确答案：</view>
					<view class="question-analysis-result-text">{{answerData.questionAnswer}}</view>
					<view class="question-analysis-result-tooltip">你的答案：</view>
					<view class="question-analysis-result-text">{{answerData.userAnswer}}</view>
				</view>
			</view>
			<view class="question-analysis-answer">
				<view class="question-analysis-answer-tooltip">答案解析</view>
				<view class="question-analysis-answer-box">
					{{questionData.quesetionAnalysis}}
				</view>
				<view class="question-analysis-answer-button">
					<view class="layout">						
						<view class="question-analysis-answer-button-a">纠错</view>
						<view class="question-analysis-answer-button-b">答疑</view>
					</view>
				</view>
			</view>
		</view>
		<view class="question-club">
			<view class="question-club-header">
				<view class="layout">
					<view class="question-club-header-item">讨论</view>
					<view class="question-club-header-item">答疑</view>
					
				</view>
			</view>
			<view class="question-club-block">
				<view class="layout">
					<view class="question-club-block-item">精彩讨论(2)</view>
					<view class="question-club-block-item">最新讨论(99+)</view>
				</view>
			</view>
			<view class="question-club-content">
				
			</view>
		</view>
		<view class="question-bottom">
			<view class="question-bottom-box">
				<view class="question-bottom-box-item">
					<view class="question-bottom-box-item-icon">
						<image src="/static/icon/icon-collection.png"></image>
					</view>
					<view class="question-bottom-box-item-text">1/48</view>
				</view>
				<view class="question-bottom-box-item">
					<view class="question-bottom-box-item-icon">
						<image src="/static/icon/icon-collection.png"></image>
					</view>
					<view class="question-bottom-box-item-text">收藏</view>
				</view>
				<view class="question-bottom-box-item">
					<view class="question-bottom-box-item-icon">
						<image src="/static/icon/icon-share.png"></image>
					</view>
					<view class="question-bottom-box-item-text">分享</view>
				</view>
				<view class="question-bottom-box-item">
					<view class="question-bottom-box-item-icon">
						<image src="/static/icon/icon-order-list.png"></image>
					</view>
					<view class="question-bottom-box-item-text">笔记</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//计时器
				clockTimer:{
					endTime:"",
					beginTime:"",
					allowed:false,
					timerHour:"00",
					timerMinute:"00",
					timerSecond:"00"
				},
				pageData:{
					start:0,
					stop:0,
					isSwipe:false
				},
				questionData:{
					questionName:"1.会计的基本职能包括（）。",
					quesetionAnalysis:"会计的基本职能包括核算的职能和监督职能，由此可知本题的正确但是C"
				},
				answerData:{
					userAnswer:"-",
					questionAnswer:"-"
				},
				questionList:[
					{
						title:"会计控制与会计决策",
						volume:"A",
						allowedRight:1,
						checked:false,
					},
					{
						title:"会计预测与会计控制",
						volume:"B",
						allowedRight:1,
						checked:false,
					},
					{
						title:"会计核算与会计监督",
						volume:"C",
						allowedRight:2,
						checked:false,
					},
					{
						title:"会计计划与会计决策",
						volume:"D",
						allowedRight:1,
						checked:false,
					}
				]
			}
		},
		onLoad(option) {
			let questionType = option.questionType
			this.questionType = parseInt(questionType)
			let questionID = option.questionID
			this.questionID = parseInt(questionID)
		},
		methods: {
			handleBackedButton:function(){
				uni.redirectTo({
					url:"/pages/examine/main/main"
				})
			},
			onClickTimer:function(){
				let _this = this
				_this.clockTimer.timerHour = "00"
				_this.clockTimer.timerMinute = "00"
				_this.clockTimer.timerSecond = "00"
				setTimeout(function(){
					_this.onClickTimer();
				},1000)
			},
			handleMoveBegin:function(e){
				//console.log("开始滑动",e)
				this.start = e.touches[0].pageX;
			},
			handleMove:function(e){
				//console.log("滑动中",e)
				this.stop = e.touches[0].pageX;
			},
			handleEnd:function(e){
				let distance = this.stop - this.start;
				if (Math.abs(distance) > 10) { // 设置一个阈值，确定是否进行了滑动
					this.isSwipe = true;
					if (distance > 0) {
					  // 右滑
					  console.log('Right swipe');
					  this.questionID = this.questionID-1;
					  this.onRefreshQuestion()
					} else {
					  // 左滑
					  console.log('Left swipe');
					  this.questionID = this.questionID+1;
					  this.onRefreshQuestion()
					}
				}
			},
			handleQuestionButton:function(question,index){
				let _questionList = []
				let rightAnswer = []
				this.questionList.forEach((item,index)=>{
					item['checked'] = false;
					_questionList.push(item)
					if(item.allowedRight == 2){
						rightAnswer.push(item['volume'])
					}
				})
				this.answerData.userAnswer = question.volume
				this.answerData.questionAnswer = rightAnswer.join(",")
				this.questionList = _questionList
				question['checked'] = true
				this.questionList[index] = question
			},
			onCollectionSubmit:function(){
				let formData = {
					"questionID":this.questionID
				}
				this.$examine.saveQuestion(formData).then(res=>{
					console.log(res)
				})
			},
			//纠错
			onFeedbackSubmit:function(){
				let formData = {
					"questionID":this.questionID,
					"subject":"",//科目
					"feecbackType":"",//题干、解析、其他
					"content":"",
					"attach":"",//图片
				}
				this.$examine.saveFeedback(formData).then(res=>{
					console.log(res)
					if(res.code == 200){
						
					}else{
						
					}
				})
			},
			//评论
			onCommentSubmit:function(){
				let formData = {
					"questionID":this.questionID
				}
				this.$examine.saveComment(formData).then(res=>{
					console.log(res)
				})
			},
			onRefreshQuestion:function(){
				this.$examine.getQuestionDetail({
					"questionID":this.questionID
				}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; padding-top: 160rpx; padding-bottom: 120rpx; }

.question-header { position: fixed;top:0; padding-top:var(--status-bar-height); left: 0; right: 0; background: #fff; }
.question-header-icon { width: 40rpx; height: 40rpx; padding-top:30rpx; padding-left: 25rpx;}
.question-header-tooltip { width: 650rpx; height: 50rpx; padding: 25rpx 0; font-size: 18px; font-weight: bold; }
.question-header-tooltip { text-align: center;}

.question-clock { position: fixed; top: 90rpx; left: 0; right: 0; background: #fff;  padding: 20rpx 25rpx;}
.question-clock-timer-icon { width: 40rpx; height: 40rpx; padding-right: 10rpx; }
.question-clock-tool { padding-left: 320rpx; }
.question-clock-tool-item { width: 50rpx; height: 30rpx; margin-right: 50rpx; }
.question-clock-menu { position: fixed; top: 170rpx; left: 0; right: 0; background: #fff; }
.question-clock-menu-item { padding: 10rpx 0;}
.question-clock-menu-tooltip { width: 300rpx; padding-left: 25rpx;}
.question-clock-menu-volume { width: 400rpx; text-align: right;}
.question-clock-menu-volume-item { padding: 10rpx 15rpx; }

.question-basic { background: #fff; padding: 25rpx; }
.question-basic-tooltip { font-size: 16px; }
.question-basic-type { font-weight: bold; font-size: 18px; }
.question-list { background: #fff; padding: 25rpx; }
.question-list-block { background: #ededed; margin-bottom: 30rpx; border-radius: 10rpx; padding: 25rpx;}
.question-list-block-box { display: flex; }
.question-list-waring { background: #ffb3a7; color: #f30;}
.question-list-right { background: #ffb3a7; color: #0c8918;}
.question-list-button { width: 120rpx; height: 50rpx; padding: 10rpx; margin: 0 auto; border: #ededed 1px solid; border-radius: 15rpx; }
.question-list-button-icon { width: 30rpx; height: 30rpx; margin-top: 5rpx; margin-right: 15rpx;}

.question-analysis { background: #fff; padding: 25rpx; margin: 25rpx 0; }
.question-analysis-answer-tooltip { margin: 15rpx 0; border-left: #0c8918 10rpx solid; padding-left: 20rpx; }
.question-analysis-answer-tooltip { font-size: 16px; font-weight: bold; }
.question-analysis-answer-box { font-size: 16px; line-height: 25px; }
.question-analysis-answer-button { padding-left: 370rpx; padding-top: 50rpx;}
.question-analysis-answer-button-a { border: #ededed 1px solid; border-radius: 10rpx; padding: 10rpx 40rpx; margin-right: 40rpx;}
.question-analysis-answer-button-b { background: #0c8918; color: #fff; padding: 10rpx 40rpx; border-radius: 10rpx;}
.question-analysis-result { padding-bottom: 30rpx;}
.question-analysis-result-tooltip { width: 170rpx; font-size: 18px; font-weight: bold; }
.question-analysis-result-text { color: #0c8918; width: 180rpx; text-align: left; }

.question-club { background: #fff; }
.question-club-header { border-bottom: #ededed 1px solid; padding: 15rpx 25rpx; }
.question-club-header-item { padding-right: 25rpx;}
.question-club-block { padding: 15rpx 25rpx; }
.question-club-block-item { border: #0c8918 1px solid; border-radius: 25rpx; padding:10rpx 20rpx; margin-right: 25rpx; }
.question-club-content { min-height: 400rpx; }

.question-bottom { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; height: 100rpx; }
.question-bottom-box { display: flex; }
.question-bottom-box-item { width: 187.5rpx;}
.question-bottom-box-item-icon { width: 30rpx; height: 30rpx; margin: 0 auto; padding-top: 30rpx;}
.question-bottom-box-item-text { width: 100%; text-align: center; }
</style>
